<template>
  <el-row>
    <!-- 基础信息   -->
    <el-col v-if="info && info['resourceId']">
      <el-col :span="5">
        <img width="80%" v-if="info['surfacePlot'] ==='0'"
             src="~@/assets/resources-center/no_picture.jpg" alt=""/>
        <img width="80%" v-else
             :src="imgUrl + info['surfacePlotImg']" alt="">
      </el-col>
      <el-col :span="16">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="资源编号">
            {{ info['resourceId'] }}
          </el-descriptions-item>
          <el-descriptions-item label="资源名称">
            <span v-if="'1'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-input v-model="editTest"
                            maxlength="50"
                            show-word-limit
                            placeholder="资源名称"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('resourceName')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ info['resourceName'] }}
              <span class="el-icon" @click="editId='1'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="覆盖范围">
            <span v-if="'2'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-select v-model="editTest"
                             size="small"
                             placeholder="请选择"
                             style="width: 100%">
                    <el-option
                        v-for="item in coverage"
                        :key="item['dictKey']"
                        :label="item['dictValue']"
                        :value="item['dictKey']">
                    </el-option>
                  </el-select>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('coverage')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ formatterCoverage({cellValue: info['coverage']}) }}
                 <span class="el-icon" @click="editId='2'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="访问权限">
            <span v-if="'3'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-select v-model="editTest"
                             size="small"
                             placeholder="请选择"
                             style="width: 100%">
                    <el-option
                        v-for="item in openMode"
                        :key="item['dictKey']"
                        :label="item['dictValue']"
                        :value="item['dictKey']">
                    </el-option>
                  </el-select>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('visitRestriction')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ formatterOpenMode({cellValue: info['visitRestriction']}) }}
              <span class="el-icon" @click="editId='3'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="资源状态">
            <span v-if="'4'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-select v-model="editTest"
                             size="small"
                             placeholder="请选择"
                             style="width: 100%">
                    <el-option label="上线" value="1"></el-option>
                    <el-option label="下线" value="2"></el-option>
                  </el-select>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('isStartup')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ formatterIsStartup({cellValue: info['isStartup']}) }}
              <span class="el-icon" @click="editId='4'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ info['createdTime'] }}
          </el-descriptions-item>
          <el-descriptions-item label="发布人" :span="2">
            {{ info['createUserInfo']['realName'] }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式" :span="2">
            {{ info['createUserInfo']['phone'] }}
          </el-descriptions-item>
          <el-descriptions-item label="联系单位" :span="2">
            {{ info['createUserInfo']['organizations'][0]['orgName'] }}
          </el-descriptions-item>
          <el-descriptions-item label="联系地址" :span="2">
            {{ info['createUserInfo']['organizations'][0]['orgSite'] }}
          </el-descriptions-item>
          <el-descriptions-item label="描述信息" :span="2" label-style="width: 100px">
            <span v-if="'5'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      maxlength="1000"
                      show-word-limit
                      v-model="editTest">
                  </el-input>
                </el-col>
                <el-col :span="7">
                   <el-button @click="edit('resourceDescribe')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ info['resourceDescribe'] }}
              <span class="el-icon" @click="editId='5'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import {resourceDict, queryResourceItem, updatedResourceItem} from "@/api/resources-center/service";

/**
 * {资源基础信息}
 *
 * @author: 宋康
 * @date: 2023/2/13
 */
export default {
  name: "ResourceBasicInfo",
  mixins: [resourceDict],
  props: {
    rid: {
      type: String,
      required: true
    },
    modeList: {
      type: Array,
      required: true
    },
    coverageList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      resourceId: '',
      info: null,
      editId: '0',
      editTest: '',
    }
  },
  methods: {
    /**
     * {获取信息}
     *
     * @author: 宋康
     * @date: 2023/2/8
     */
    getInfo() {
      if (this.resourceId !== '') {
        this._debounceT("g7hKmeaw", queryResourceItem(this.resourceId).then(res => {
          if (res.status) {
            this.info = res.data;
          }
        }), 200)
      }
    },
    /**
     * {更新编辑}
     * @param fieldName
     * @author: 宋康
     * @date: 2023/2/13
     */
    edit(fieldName) {
      if (this.$XEUtils.isEmpty(this.editTest.trim())) {
        this.$message.error('修改信息不可为空');
        return;
      }
      this._debounceT("3angssxi", () => updatedResourceItem(this.resourceId, fieldName, this.editTest.trim()).then(res => {
        if (res.status) {
          this.$message.success("修改完成");
          this.editId = '0';
          this.editTest = '';
          this.getInfo();
        } else {
          this.$message.error(res.msg);
        }
      }), 300);
    }
  },
  mounted() {
    this.resourceId = this.rid;
    this.openMode = this.modeList;
    this.coverage = this.coverageList;
    this.getInfo();
  },
  watch: {
    rid(n) {
      this.resourceId = n;
      this.getInfo();
    },
    modeList(n) {
      this.openMode = n;
    },
    coverageList(n) {
      this.coverage = n;
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon {
  margin-left: 10px;
  &:hover {
    color: #3f88e7;
    cursor: pointer;
  }
}
</style>